<!DOCTYPE html>
<html>

<head>
   
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--360浏览器优先以webkit内核解析-->


<title>经销商进销存报告汇总人管理</title>

<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
<link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
  <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">


    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <style>
   	.imgino{height: 68px;width: 68px;}
   	ul li{list-style: none;}
   	img[name="deng"]{width: 60px;height: 81px;}
   	.sp{
   		display: inline-block;
    padding-right: 38px;
    position: relative;
    /* height: 160px; */
    height: 125px;
   	}
   	.sp:first-child .bg{
   		    left: 50%;
    		margin-left: -16px
   	}
   	.me{height: 89px}
   	.me .passName{border: 2px solid #666666;}
   	.me .passTop{border-color: #666666 transparent transparent;
    top:18%;}
    .me .passButtom{bottom: -37%;}
    .me .passIcon{    background: url(__STATIC__/layout/img/me.png);
    background-repeat: no-repeat;}
   	.bg{
   	background: url(__STATIC__/layout/img/bgd.png) repeat 0px 50px;
    position: absolute;
    width: 80%;
    height: 50%;
     z-index: 1; 
     top: 34%; 
    top: 43%;
    left: 40%;
   	}
   	.passName{
   	border: 2px solid #28b76a;
   	position: relative;
    padding: 0px 8px;
    border-radius: 4px;
    word-break: keep-all;
    z-index: 3; 
    line-height: 18px;}
	.passTop{
	position: absolute;
    left: 50%;
    top: 73%;
    margin-left: -6px;
    margin-top: 17px;
    display: block;
    width: 0;
    height: 0;
    border-width: 8px 6px 0;
    border-style: solid dashed dashed;
    border-color: #28B76A transparent transparent;
    font-size: 0;
    line-height: 0;
	}
	.passButtom{
	    width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    bottom:-6px;
    margin-left: -8px;
    margin-top: -9px;
    border-width: 10px 8px 0;
    border-style: dashed dashed solid;
    border-color:#fffefd transparent transparent;
    font-size: 0;
    line-height: 0;
	}
	.start .passIcon{
		background: url(__STATIC__/layout/img/tiJiaoLiuCheng.png);
   	   background-repeat: no-repeat
	}
	.passIcon{
			width: 20px;
    		height: 57px;
    		/*background: url(../img/pass.png);*/
    		display: block;
    		margin-top: 28px;
    		position: absolute;
    		/* z-index: 2; */
    		margin-left: -28px;
    		left: 50%;
    		/*background-repeat: no-repeat;*/
	}
	.shenpi{
		    /*display: none;*/
    		width: 200px;
    		height: auto;
    		position: absolute;
    		padding: 5px 10px;
    		border: 2px solid #bbbbbb;
    		border-radius: 4px;
    		margin-top: 40px;
    		margin-left: -91px;
    		background: #fffefd;
    		z-index: 11;
	}
	.shenpi .top{
		    width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    margin-left: -8px;
    margin-top: -12px;
    border-width: 0 8px 10px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #bbbbbb;
    font-size: 0;
    line-height: 0;
    background: #fffefd;
	}
	.shenpi .buttom{
		    width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    margin-left: -8px;
    margin-top: -9px;
    border-width: 0 8px 10px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #fffefd;
    font-size: 0;
    line-height: 0;
	}
    </style>

</head>

<body class="gray-bg" style="padding: 3px;font-size: 13px">
	<div class="container bs-docs-container" style="background: #fff">
		<div class="bs-docs-section">
    	<div class="bs-example bs-example-type">
    	<table class="table row-margin-top text-center">
      <tbody>
        <tr class="text-center">
          <td style="border:0">
          	<h1>2017年06月何跃的报销单</h1>
          	<p class="padding-10">单号： <span>201706110018</span>	</p>
          </td>
        </tr>
        <tr>
          <td>
          	<h2 class="text-center">基本信息</h2>
          	<img src="__STATIC__/layout/img/fengexian.png">
          	<div class="row padding-10">
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/customerOrDealer.png" class="imgino">
          			<ul>
          				<li class="text-success">报销人</li>
          				<li class="">何跃</li>
          				<li class="">华东大区经理</li>
          			</ul>
          		</div>
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/activityXiTong.png" class="imgino">
          			<ul>
          				<li class="text-success">报销部门</li>
          				<li class="">华北大区</li>
          				<li class=""></li>
          			</ul>
          		</div>
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/expenseType.png" class="imgino">
          			<ul>
          				<li class="text-success">费用额</li>
          				<li class="">122元</li>
          				<li class=""></li>
          			</ul>
          		</div>
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/activeMode.png" class="imgino">
          			<ul>
          				<li class="text-success">费用科目</li>
          				<li class="">住宿费</li>
          				<li class="">(共<span>1</span>个)</li>
          			</ul>
          		</div>
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/activityTime.png" class="imgino">
          			<ul>
          				<li class="text-success">报销月份</li>
          				<li class="">2017-09</li>
          				<li class=""></li>
          			</ul>
          		</div>
          		
          		<div class="col-md-2">
          			<img src="__STATIC__/layout/img/activityProduct.png" class="imgino">
          			<ul>
          				<li class="text-success">支付方式</li>
          				<li class="">转账</li>
          				<li class=""></li>
          			</ul>
          		</div>
          	</div>

          	<table class="table table-bordered text-left" >
          		<tr class="info">
          			<td>报销事由</td>
          		</tr>
          		<tr>
          			<td>123</td>
          		</tr>
          	</table>
          </td>
        </tr>
        <tr>
          <td>	
          	<h2 class="text-center">决策信息</h2>
          	<img src="__STATIC__/layout/img/fengexian.png">
          	<div class="row row-margin-top padding-10">
          		<div class="col-md-4">
          			<div style="height: 160px;">
          				<img src="__STATIC__/layout/img/huang.png" name="
          			deng" class="huang" style="margin-top: 50px;">
          			<p class="dengText" style="color: #fd901b">将超预算</p>
          			</div>
          			<div class="padding-10">预算红绿灯</div>
          		</div>
          		<div class="col-md-4">
          			<div class="echarts" id="echarts0" style="width:100%;height:160px;font-size:20px"></div>
          			<div class="padding-10">本次费用报销情况</div>
          		</div>
          		<div class="col-md-4">
          			<div class="echarts" id="echarts1" style="width:100%;height:160px;font-size:20px"></div>
          			<div class="padding-10">部门预算使用情况</div>
          		</div>
          	</div>
          </td>
        </tr>
        <tr>
          <td class="text-left">
          	<div class="row-margin-top">
          		<p class="padding-10">关联出差申请单号：</p>
          		<p><a href="javascript:;">201706010003(123)</a></p>
          	</div>
          </td>
        </tr>
        <tr>
          <td class="text-left">
          	<div class="row-margin-top">
          		关联万用申请单号:<span class="colorRed">无关联的万用申请单</span>
          	</div>
          </td>
        </tr>
        <tr>
          <td class="text-right">
        	<p class="padding-10">  	<button class="btn btn-sm btn-primary btnActivity" type="button">查看预算进度</button><span class="lr_5"></span><a class="btn btn-sm btn-primary" href="javascript:;">查看明细</a></p>
          	<table class="table-bordered table bud_hei text-center row-margin-top tableActivity" style="display: none;">
          		<tr class="info">
          			<td colspan="6" class="font-bold">预算使用情况(金额单位：元)</td>
          		</tr>
          		<tr  class="info">
          			<td>二级费用科目</td>
          			<td>预算金额</td>
          			<td>已批复金额</td>
          			<td>未使用金额</td>
          			<td>申请中金额</td>
          			<td>本次申请金额</td>
          		</tr>
          		<tr class="text-right">
          			<td class="text-left">住宿费</td>
          			<td>0.00</td>
          			<td>0.00</td>
          			<td>0.00</td>
          			<td>0.00</td>
          			<td>0.00</td>
          		</tr>
          	</table>
          </td>
        </tr>
        <tr>
        	<td>
        	<h2 class="text-center">审批信息</h2>
        	<h6>本次申请已耗时 195天0时9分</h6>
          	<img src="__STATIC__/layout/img/fengexian.png">
         <div class="form-group white-bg text-left" style="margin:20px 10px 20px 20px;">
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list">
                                   </div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="btn btn-default">开始上传</button>
                </div>
                <input type="hidden" name="attach" id="attach"  >
            </div>
            <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
        </div>
    <table class="table-bordered table text-center bud_hei" id="flowTab">
        		<tr class="info font-bold">
        			<td colspan="2" class="text-left">请选择流程后续的审批领导 <button class="btn-sm btn btn-info">设置我的快速拆分路径</button></td>
        		</tr>
        		<tr>
        			<td>审批人</td>
        			<td><button class="btn btn-sm btn-primary" id="addShenpiMan">添加审批人</button></td>
        		</tr>
        		<tr>
        			<td>     <div class="input-group text-center">
                            <input id="area_id" type="text" placeholder="请输入关键字或空格查询"
                                   class="form-control" value="" style="min-width: 300px;width: 300px">
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                   
			</td>
        			<td> <a href="javascript:;" id="select_area" class="btn btn-primary btn-sm">选择</a></td>
        		</tr>
    </table>
       <div class="padding-10" style="margin-bottom: 30px">
        	<div class="sp start">
            	<div class="bg"></div>
        		<div class="passName">
            		<div class="passTop"></div>
                	<div class="passButtom"></div>
                	何越
                	<br>华东大区经理
                	<br>07-07 14:39
            	</div>
            	<span class="passIcon">
            		<div class="shenpi" align="left" style="display: none;">
                		<div class="top"></div>
                    	<div class="buttom"></div>
                    	提交人：<span>何越</span> <br>
                    	提交时间：<span>07-07 14:39</span><br>
                    
                    	
                	</div>
            	</span>
        	</div>
        	<div class="sp me">
        		<div class="passName">
            		<div class="passTop"></div>
                	<div class="passButtom"></div>
                	我
            	</div>
            	<span class="passIcon">
            		<div class="shenpi" align="center" style="display: none;">
                		<div class="top"></div>
                    	<div class="buttom"></div>
                    	待审批
                	</div>
            	</span>
        	</div>
        	</div>
        	</td>
        </tr>
       <tr>
       	<td>
       		<div class="padding-10 text-left">审批意见</div>
       				<textarea class="form-control" name="" id="" style="resize: none;width: 95%;height: 120px"></textarea>
       	  <div class="row padding-10">
            <button class="btn btn-primary" type="button" id="bc">拆分至领导审批</button>
            <button class="btn btn-info" type="button">打回修改</button>
             <button class="btn btn-success" type="button">审批通过</button>
      </div>
       	</td>
       </tr>
      </tbody>
    </table>
    	</div>
  </div>
	</div>
<!-- 全局js -->
<script src="__STATIC__/layout/js/jquery.min.js"></script>
<script src="__STATIC__/layout/js/contabs_sub.js"></script>
<script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Sweet alert -->
<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>

 <script src="__STATIC__/layout/js/plugins/echarts/echarts-all.js"></script>
<script type="text/javascript">
	   $(function(){
            /*饼状图*/
            var echarts0 = echarts.init(document.getElementById("echarts0"));
            	echarts0.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});

       var pieoption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '60%',
                selectedMode: 'single', //单一选中模式 
                center: ['60%', '70%'],
                data:[
                    {value:8489044.98, name:'活动费'},
                ],
                itemStyle:{  
                emphasis: {  
                    shadowBlur: 10,  
                    shadowOffsetX: 0,  
                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                }  
              }  
            }
        ]
    };

    echarts0.setOption(pieoption);
		echarts0.hideLoading();
		    // 为echarts对象加载数据 
          var echarts0 = echarts.init(document.getElementById("echarts1"));
          	echarts0.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});
       var pieoption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '60%',
                selectedMode: 'single', //单一选中模式 
                center: ['60%', '70%'],
                data:[
                    {value:0, name:'未使用0元'},
                    {value:0, name:'已支取0元'},
                    {value:122, name:'申请中(含本次)122元'},
                ],
                itemStyle:{  
                emphasis: {  
                    shadowBlur: 10,  
                    shadowOffsetX: 0,  
                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                }  
              }  
            }
        ]
    };
    echarts0.setOption(pieoption);
    echarts0.hideLoading();
    $(window).resize(echarts0.resize);
})
    $(".btnActivity").click(function(){
          var str = $(this).html()
        
          /*console.log(tr)*/
        if(str=="查看预算进度"){
            $(".tableActivity").show();
            $(this).html("收起预算进度详情");
          }else{
            $(".tableActivity").hide();
            $(this).html("查看预算进度")
          }
           })
$("#addShenpiMan").click(function(){
	var str = '<tr><td><div class="input-group"><input id="area_id" type="text" placeholder="请输入关键字或空格查询" class="form-control" value="" style="min-width: 300px;width: 300px"><div class="input-group-btn"><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div></div></div></td><td> <a href="javascript:;" id="select_area" class="btn btn-primary btn-sm">选择</a><span></span> <button class="btn btn-sm btn-danger delthis" type="button">删除</button></td></tr>'
	$("#flowTab tbody").append(str);
})

/*请输入关键字或空格查询*/
  var jieshou = $("#area_id");
 sousuo(jieshou);
       function sousuo(id){
            id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

          }
	  $(document).on("click",".delthis",function(){
             	var _$this=this
             	console.log(_$this)
             		swal({ 
						  title: "", 
						  text: "确定删除！", 
						  type: "warning",
						  showCancelButton: true, 
						  confirmButtonColor: "#DD6B55",
						  confirmButtonText: "确定", 
						  cancelButtonText: "取消",
						  closeOnConfirm: false, 
						  closeOnCancel: false
						},
						function(isConfirm){ 
						  if (isConfirm) { 
						  	// console.log(_$this);
						  	$(_$this).closest("tr").remove();
						    swal("删除！", "成功","success"); 
						   
						  } else { 
						    swal("取消！", "","error"); 
						  } 
					});
             });

	  /*passIcon*/
	   $(function () {
            $(".passIcon").mouseover(function () {
                $(this).find(".shenpi").show();
            });
            $(".passIcon").mouseout(function () {
                $(this).find(".shenpi").hide();
            });
        });
</script>
</body>

</html>